1.背景介绍

指令是angular的一个特色，是对HTML的拓展，angular中指令有很多，你甚至可以自定义指令， 可以说是一个非常强大的功能。今天，先从几个最常用的指令着手，学习angular的指令。

2.知识剖析

ng-if 指令其实就是控制DOM的存在与不存在。当为true的时候，添加HTML元素， false的时候删除HTML元素，其与ng-hide、ng-show等的区别是ng-if:false;会将DOM删除

ng-class 指令的使用通常有三种方式，分别是双向绑定方式、对象数组方法、键值对方式。这里不过多涉及，demo中详谈。

ng-options 指令用于使用 <options> 填充 <select> 元素的选项。
ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似， 很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度。

ng-value 指令用于设置 input 或 select 元素的 value 属性。
和value相比，它的值可以是表达式，所以相比之下可以实现更多需求。
比如当需要使用ng-repeat来动态生成input[]的时候，ngValue是很有用处的。

另外ng-value还有个用处就是可以避免ng-model中无法使用过滤器的弊端

ng-click 指令告诉了 AngularJS HTML 元素被点击后需要执行的操作。
如果是使用ng-click来实现函数的执行的话，还可以进行传参。
一个ng-click可以触发多个操作，
<button ng-click="function1();function2()"></button>
先执行function1后执行function2

3.常见问题

原生事件如click如何调用angular控制器内的函数？

4.解决方案

1、原生事件和angular事件的区别

这里ng-click和onclick的最主要的区别是： ng-click的作用域是其所在的ng-controller所声明的作用域，而onclick的作用域是全局的。

如何解决

见demo

5.编码实战

6.扩展思考

ng-if的作用域问题

ng-if指令会创建一个子级作用域，因此，如果在ng-if指令中添加了元素， 并向元素属性增加 ng-model指令，那么ng-model指令对应的作用域属性 子级作用域，而并非控制器注入的$scope作用域对象，这点在进行双向数 据绑定时，需要引起注意。

7.参考文献

参考一：菜鸟教程

参考二：[Angularjs]ng-select和ng-options

8.更多讨论

用angularJS的ng-model绑定到select上，会自动增加一个value为空的option,这是为什么？

原因：ng-model没有初始化导致的， 如果ng-model所绑定的变量的值在ng-options绑定的value里面有， 下拉选框中就不会有空白的一项，选中别的数据项以后消失； 如果ng-model所绑定的变量的值不在ng-options绑定的value里面， 下拉选框中就不会有空白一项,并且只有当ng-options绑定的value里有对应 的text为空行时，这个空行才会一直存在于下拉选项里。

解决办法
方法一：将select中的一个option设置为空，就可以防止因添加ng-model自动添加空option的问题
方法二：自己预先添加一个value为空的option，再用ng-if="false"把它去掉